<template>
    <view class="order-list">
        <!-- 状态分类 -->
        <view class="tab-bar">
            <view 
                class="tab-item" 
                v-for="(tab, index) in tabs" 
                :key="index"
                :class="{ active: currentTab === index }"
                @tap="switchTab(index)"
            >
                <text>{{ tab }}</text>
            </view>
        </view>
        
        <scroll-view 
            class="list-container" 
            scroll-y
            refresher-enabled
            :refresher-triggered="isRefreshing"
            @refresherrefresh="onRefresh"
            @scrolltolower="onLoadMore"
        >
            <template v-if="orderList.length">
                <view class="order-item" v-for="(item, index) in orderList" :key="index">
                    <view class="order-header">
                        <text class="time">{{ item.createTime }}</text>
                        <text class="status" :class="getStatusCss(item.status)">{{ getStatusText(item.status) }}</text>
                    </view>
                    <view class="goods-list">
                        <view class="goods-item" v-for="(goods, idx) in item.goods" :key="idx">
                            <view class="goods-info">
                                <text class="name">{{ goods.name }}</text>
                                <text class="spec" v-if="goods.spec">{{ goods.spec }}</text>
                            </view>
                            <view class="right">
                                <text class="price">¥{{ goods.price }}</text>
                                <text class="count">x{{ goods.count }}</text>
                            </view>
                        </view>
                    </view>
                    <view class="order-footer">
                        <text class="total">合计：¥{{ item.total }}</text>
                        <!-- 待完成的订单可以取消 -->
                        <view class="btn-group" v-if="item.status === '1'">
                            <text class="btn cancel" @tap="handleCancel(item)">取消订单</text>
                        </view>
                    </view>
                </view>
                <!-- 加载更多提示 -->
                <view class="loading-more" v-if="hasMore">
                    <text>加载中...</text>
                </view>
                <view class="no-more" v-else>
                    <text>没有更多了</text>
                </view>
            </template>
            <view v-else class="empty-state">
                <text>暂无数据</text>
            </view>
        </scroll-view>
    </view>
</template>

<script>
import { orderApi } from '@/api'

export default {
    data() {
        return {
            tabs: ['全部', '待完成', '已完成'],
            currentTab: 0,
            orderList: [],
            pageNum: 1,
            pageSize: 10,
            total: 0,
            isRefreshing: false,
            isLoading: false
        }
    },
    computed: {
        hasMore() {
            return this.orderList.length < this.total
        },
    },
    methods: {
        switchTab(index) {
            if (this.currentTab === index) return
            this.currentTab = index
            this.resetList()
        },
        resetList() {
            this.pageNum = 1
            this.orderList = []
            this.getOrderList()
        },
        getOrderList() {
            if (this.isLoading) return
            this.isLoading = true
            
            orderApi.getOrderList({
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                status: this.currentTab === 0 ? '' : this.currentTab
            }).then(res => {
                if (this.pageNum === 1) {
                    res.rows.forEach(item => {
                        item.goods = JSON.parse(item.goods)
                    })
                    this.orderList = res.rows
                } else {
                    res.rows.forEach(item => {
                        item.goods = JSON.parse(item.goods)
                    })
                    this.orderList = [...this.orderList, ...res.rows]
                }
                this.total = res.total
            }).finally(() => {
                this.isLoading = false
                this.isRefreshing = false
            })
        },
        onRefresh() {
            this.isRefreshing = true
            this.resetList()
        },
        onLoadMore() {
            if (!this.hasMore || this.isLoading) return
            this.pageNum++
            this.getOrderList()
        },
        getStatusText(status) {
            const statusMap = {
                '1': '待完成',
                '2': '已完成',
                '3': '已取消',
                '4': '已接单'
            }
            return statusMap[status]
        },
        getStatusCss(status) {
            const statusMap = {
                '1': 'pending',
                '2': 'completed',
                '3': 'cancelled',
                '4': 'refunded'
            }
            return statusMap[status]
        },
        handleCancel(item) {
            uni.showModal({
                title: '提示',
                content: '确定要取消该订单吗？',
                success: (res) => {
                    if (res.confirm) {
                        uni.showLoading({
                            title: '取消中...'
                        })

                        orderApi.cancelOrder({
                            id: item.id,
                            status: 3
                        }).then(res => {
                            uni.hideLoading()
                            uni.showToast({
                                title: '取消成功',
                                icon: 'success'
                            })
                            this.getOrderList()
                        })
                    }
                }
            })
        }
    },
    onShow() {
        this.resetList()
    }
}
</script>

<style lang="scss">
.order-list {
    min-height: 100vh;
    background-color: #f8f8f8;
    
    .tab-bar {
        display: flex;
        background-color: #fff;
        padding: 20rpx 0;
        
        .tab-item {
            flex: 1;
            text-align: center;
            font-size: 28rpx;
            color: #666;
            position: relative;
            
            &.active {
                color: #1989fa;
                font-weight: 500;
                
                &::after {
                    content: '';
                    position: absolute;
                    left: 50%;
                    bottom: -10rpx;
                    transform: translateX(-50%);
                    width: 40rpx;
                    height: 4rpx;
                    background: #1989fa;
                    border-radius: 2rpx;
                }
            }
        }
    }
    
    .list-container {
        padding: 20rpx;
        box-sizing: border-box;
        
        .order-item {
            background-color: #fff;
            border-radius: 12rpx;
            padding: 30rpx;
            margin-bottom: 20rpx;
            
            .order-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 20rpx;
                
                .time {
                    font-size: 26rpx;
                }
                
                .status {
                    font-size: 26rpx;
                    
                    &.pending {
                        color: #87CEFA;
                    }
                    
                    &.completed {
                        color: #52c41a
                    }
                    
                    &.cancelled {
                        color: #808080
                    }

                    &.refunded {
                        color: #1989fa;
                    }
                }
            }
            
            .goods-list {
                .goods-item {
                    display: flex;
                    justify-content: space-between;
                    align-items: flex-start;
                    margin-bottom: 16rpx;
                    
                    .goods-info {
                        flex: 1;
                        margin-right: 20rpx;
                        
                        .name {
                            font-size: 28rpx;
                            color: #333;
                            margin-bottom: 4rpx;
                        }
                        
                        .spec {
                            display: block;
                            font-size: 24rpx;
                            color: #999;
                            margin-top: 4rpx;
                        }
                    }
                    
                    .right {
                        text-align: right;
                        
                        .price {
                            font-size: 26rpx;
                            color: #333;
                            margin-right: 20rpx;
                        }
                        
                        .count {
                            font-size: 26rpx;
                            color: #666;
                        }
                    }
                }
            }
            
            .order-footer {
                margin-top: 20rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;
                
                .total {
                    font-size: 28rpx;
                    color: #333;
                    font-weight: 500;
                }
                
                .btn-group {
                    display: flex;
                    gap: 20rpx;
                    
                    .btn {
                        padding: 16rpx 40rpx;
                        font-size: 26rpx;
                        border-radius: 40rpx;
                        position: relative;
                        overflow: hidden;
                        transition: all 0.3s;
                        
                        &.cancel {
                            color: #666;
                            border: 2rpx solid #ddd;
                            
                            &:active {
                                opacity: 0.8;
                            }
                        }
                        
                        &.confirm {
                            color: #fff;
                            background: linear-gradient(to right, #4facfe, #00f2fe);
                            border: none;
                            box-shadow: 0 4rpx 8rpx rgba(79, 172, 254, 0.2);
                            
                            &:active {
                                transform: scale(0.98);
                                box-shadow: 0 2rpx 4rpx rgba(79, 172, 254, 0.1);
                            }
                            
                            &::after {
                                content: '';
                                position: absolute;
                                top: 50%;
                                left: 50%;
                                width: 100%;
                                height: 100%;
                                background-color: rgba(255, 255, 255, 0.1);
                                border-radius: 50%;
                                transform: translate(-50%, -50%) scale(0);
                                opacity: 0;
                                transition: transform 0.6s, opacity 0.6s;
                            }
                            
                            &:active::after {
                                transform: translate(-50%, -50%) scale(2);
                                opacity: 1;
                            }
                        }
                    }
                }
            }
        }
    }
    
    .empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 200rpx;
        
        image {
            width: 200rpx;
            height: 200rpx;
            margin-bottom: 20rpx;
        }
        
        text {
            font-size: 28rpx;
            color: #999;
        }
    }
    
    .loading-more, .no-more {
        text-align: center;
        padding: 20rpx 0;
        
        text {
            font-size: 24rpx;
            color: #999;
        }
    }
}
</style> 